<template>
  <div class="home-new">
    <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
      <!-- 右边插槽 -->
      <template #right>
        <more path="/" /></template>
      <!-- 面板内容，默认插槽 -->
      <div ref="target" style="position: relative; height: 426px">
        <transition name="fade">
          <ul class="goods-list" v-if="goods.length">
            <li v-for="item in goods" :key="item.id">
              <RouterLink :to="`/product/${item.id}`">
                <img :src="item.picture" alt="" />
                <p class="name ellipsis">{{ item.name }}</p>
                <p class="price">&yen;{{ item.price }}</p>
              </RouterLink>
            </li>
          </ul>
          <home-skeleton v-else bg="#f0f9f4"></home-skeleton>
        </transition>
      </div>
    </HomePanel>
  </div>
</template>
<script>
  import HomePanel from "components/content/HomePanel.vue";
  import {
    findNew
  } from "@/api/home";
  import HomeSkeleton from "./HomeSkeleton.vue";
  import {
    useLazyData
  } from "hooks/index.js";
  export default {
    name: "HomeNew",
    components: {
      HomePanel,
      HomeSkeleton
    },
    setup() {
      // const goods = ref([]);
      //直接获取数据
      // findNew().then((data) => {
      //   goods.value = data.result;
      // });
      //数据懒加载
      const {
        target,
        data
      } = useLazyData(findNew);
      return {
        goods: data,
        target
      };
    },
  };

</script>
<style scoped lang="less">
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;

    li {
      width: 306px;
      height: 406px;
      background: #f0f9f4;
      .hoverShadow();

      img {
        width: 306px;
        height: 306px;
      }

      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
      }

      .price {
        color: @priceColor;
      }
    }
  }

</style>
